<template>
  <div class="condition-drawer">
    <div class="header">
      <span class="text">新条件类型</span>
      <span class="close" @click="handleClose"><CloseOutlined /></span>
    </div>
    <div class="content">
      <div class="content-title">
        <div
          class="button mr-4"
          :class="activeKey === 1 ? 'active' : ''"
          :style="activeStyle()"
          @click="handleChangeKey(1)"
          >步骤处理条件</div
        >
        <div
          :style="activeStyle()"
          :class="activeKey === 2 ? 'active' : ''"
          class="button mr-4"
          @click="handleChangeKey(2)"
          >逻辑处理条件</div
        >
        <div
          :class="activeKey === 3 ? 'active' : ''"
          class="button buttonWidth"
          :style="activeStyle()"
          @click="handleChangeKey(3)"
          >控制属性处理条件</div
        >
      </div>

      <BasicForm v-show="activeKey === 1" @register="registerStepForm" />
      <BasicForm v-show="activeKey === 2" @register="registerLogicForm" />
      <BasicForm v-show="activeKey === 3" @register="registerControlForm" />
    </div>

    <slot name="footer"></slot>
    <!-- <a-button class="button" size="large">取消</a-button>
      <a-button class="button" type="primary" size="large" @click="handleSubmit">确认</a-button> -->
  </div>
</template>
<script lang="ts" name="ConditionSet">
  import { defineComponent } from 'vue';

  import { CloseOutlined } from '@ant-design/icons-vue';
  import { ref, watch, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';

  import { stepFormSchema, logicFormSchema, controlFormSchema } from './condition.data';
  import modelerStore from '/@/store/modules/bpmnModeler';

  export default defineComponent({
    components: { BasicForm, CloseOutlined },
    props: {
      tabSiderType: Number,
      tabType: Number,
      itemObj: {
        type: Object,
        default: () => {},
      },
    },
    setup(props, { emit }) {
      const modeler = modelerStore();

      const [
        registerStepForm,
        {
          setFieldsValue: setFieldsValueStep,
          updateSchema: updateSchemaStep,
          resetFields: resetFieldsStep,
          validate: validateStep,
          clearValidate: clearValidateStep,
        },
      ] = useForm({
        labelWidth: 90,
        schemas: stepFormSchema,
        showActionButtonGroup: false,
      });
      const [
        registerLogicForm,
        {
          validate: validateLogic,
          resetFields: resetFieldsLogic,
          setFieldsValue: setFieldsValueLogic,
          clearValidate: clearValidateLogic,
        },
      ] = useForm({
        labelWidth: 90,
        schemas: logicFormSchema,
        showActionButtonGroup: false,
      });
      const [
        registerControlForm,
        {
          setFieldsValue: setFieldsValueControlForm,
          updateSchema: updateSchemaControlForm,
          // removeSchemaByField: removeSchemaByFieldControlForm,
          // appendSchemaByField: appendSchemaByFieldControlForm,
          resetFields: resetFieldsControlForm,
          validate: validateControlForm,
          clearValidate: clearValidateControlForm,
        },
      ] = useForm({
        labelWidth: 90,
        schemas: controlFormSchema,
        showActionButtonGroup: false,
      });
      const activeKey = ref(1);

      function handleChangeKey(key) {
        if (
          props.itemObj.conditionType === 0 ||
          props.itemObj.conditionType === 1 ||
          props.itemObj.conditionType === 2 ||
          props.itemObj.conditionType === 3
        ) {
          return;
        }
        activeKey.value = key;
      }

      function activeStyle() {
        if (props.itemObj.conditionType || props.itemObj.conditionType === 0) {
          return {
            opacity: '0.5',
            background: 'rgba(29, 100, 179, 0.05)',
          };
        } else {
          return {};
        }
      }

      const responseChoiceList = ref([]);
      async function getResponseChoiceList(sourceActivityId) {
        let res: any = [];
        if (sourceActivityId) {
          const item = modeler.activities.find((item) => item.activityId === sourceActivityId);
          if (item) {
            res = item?.baseInfo?.responseChoices
              ? item?.baseInfo?.responseChoices?.split(';').filter((i) => i)
              : [];
          }
        }
        responseChoiceList.value = res.length
          ? res?.map((i) => ({
              label: i,
              value: i,
            }))
          : [];
      }
      const sourceId = ref(null);
      watch(
        () => props.itemObj,
        async (v) => {
          if (v.sourceActivityId) {
            await getResponseChoiceList(v.sourceActivityId);
            updateSchemaStep({
              field: 'responseChoice',
              componentProps: {
                placeholder: '请选择处理意见',
                options: responseChoiceList.value,
              },
            });
          }
          init();
        },
        { immediate: true },
      );

      async function init() {
        await nextTick();
        if (props.tabType === 3) {
          updateSchemaControlForm([
            {
              field: 'bindPropName',
              label: '属性名称',
              component: 'Select',
              required: true,
              colProps: { span: 24 },
              componentProps: {
                options: modeler.configuration?.props?.map((i) => ({
                  label: i.propName,
                  value: i.propName,
                })),
              },
            },
          ]);
        }

        updateSchemaStep({
          field: 'sourceActivityId',
          componentProps: ({ formActionType }) => {
            return {
              options: modeler.activities
                .filter((v) => v.activityType !== -1 && v.bpmnId !== modeler.getActiveId)
                .map((i) => ({
                  label: i.activityName,
                  value: i.activityId,
                })),
              onChange: async (e) => {
                sourceId.value = e;
                await getResponseChoiceList(e);
                if (!formActionType) return;
                formActionType.setFieldsValue({ responseChoice: null });

                formActionType.updateSchema({
                  field: 'responseChoice',
                  componentProps: {
                    placeholder: '请选择处理意见',
                    options: responseChoiceList.value,
                  },
                });
              },
            };
          },
        });
      }
      // watch(
      //   () => props.tabType,
      //   (val) => {
      //     if (val === 3) {
      //       nextTick(() => {
      //         removeSchemaByFieldControlForm('bindPropName');
      //         appendSchemaByFieldControlForm(
      //           {
      //             field: 'bindPropName',
      //             label: '属性名称',
      //             component: 'Select',
      //             required: true,
      //             colProps: { span: 24 },
      //             componentProps: {
      //               options: modeler.configuration?.props?.map((i) => ({
      //                 label: i.propName,
      //                 value: i.propName,
      //               })),
      //             },
      //           },
      //           '',
      //           true,
      //         );
      //         // updateSchemaControlForm({
      //         //   field: 'bindPropName',
      //         //   componentProps: {
      //         //     options: modeler.configuration?.props?.map((i) => ({
      //         //       label: i.propName,
      //         //       value: i.propName,
      //         //     })),
      //         //   },
      //         // });
      //       });
      //     }
      //   },
      // );
      // watch(
      //   () => modeler.getActiveId,
      //   () => {
      //     updateSchemaStep({
      //       field: 'sourceActivityId',
      //       componentProps: ({ formActionType }) => {
      //         return {
      //           options: modeler.activities
      //             .filter((v) => v.activityType !== -1 && v.bpmnId !== modeler.getActiveId)
      //             .map((i) => ({
      //               label: i.activityName,
      //               value: i.activityId,
      //             })),
      //           onChange: (e) => {
      //             sourceId.value = e;
      //             getResponseChoiceList(e);
      //             if (!formActionType) return;
      //             formActionType.setFieldsValue({ responseChoice: null });

      //             formActionType.updateSchema({
      //               field: 'responseChoice',
      //               componentProps: {
      //                 placeholder: '请选择处理意见',
      //                 options: responseChoiceList.value,
      //               },
      //             });
      //           },
      //         };
      //       },
      //     });
      //   },
      // );
      // watch(
      //   () => props.tabSiderType,
      //   (val) => {

      //     if (val === 3) {
      //       nextTick(() => {
      //         removeSchemaByFieldControlForm('bindPropName');
      //         appendSchemaByFieldControlForm(
      //           {
      //             field: 'bindPropName',
      //             label: '属性名称',
      //             component: 'Select',
      //             required: true,
      //             colProps: { span: 24 },
      //             componentProps: {
      //               options: modeler.configuration?.props?.map((i) => ({
      //                 label: i.propName,
      //                 value: i.propName,
      //               })),
      //             },
      //           },
      //           '',
      //           true,
      //         );

      //         updateSchemaStep({
      //           field: 'sourceActivityId',
      //           componentProps: ({ formActionType }) => {
      //             return {
      //               options: modeler.activities
      //                 .filter((v) => v.activityType !== -1 && v.bpmnId !== modeler.getActiveId)
      //                 .map((i) => ({
      //                   label: i.activityName,
      //                   value: i.activityId,
      //                 })),
      //               onChange: (e) => {
      //                 sourceId.value = e;
      //                 getResponseChoiceList(e);
      //                 if (!formActionType) return;
      //                 formActionType.setFieldsValue({ responseChoice: null });

      //                 formActionType.updateSchema({
      //                   field: 'responseChoice',
      //                   componentProps: {
      //                     placeholder: '请选择处理意见',
      //                     options: responseChoiceList.value,
      //                   },
      //                 });
      //               },
      //             };
      //           },
      //         });
      //       });
      //     }
      //   },
      //   { immediate: true },
      // );

      function handleClose() {
        emit('close');
      }

      return {
        handleClose,
        registerStepForm,
        registerLogicForm,
        registerControlForm,
        activeKey,
        handleChangeKey,

        validateLogic,
        resetFieldsLogic,
        resetFieldsStep,
        validateStep,
        setFieldsValueLogic,
        setFieldsValueStep,
        setFieldsValueControlForm,
        updateSchemaControlForm,
        resetFieldsControlForm,
        validateControlForm,
        clearValidateStep,
        clearValidateLogic,
        clearValidateControlForm,
        activeStyle,
      };
    },
  });
</script>
<style lang="less" scoped>
  .condition-drawer {
    height: 100%;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f6f7;
      padding: 24px;

      .text {
        width: 80px;
        height: 16px;
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 16px;
      }

      .close {
        font-size: 16px;
        color: #c0c0c0;
        cursor: pointer;
      }
    }

    .content {
      padding: 16px 24px 0;

      .content-title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .button {
          width: 140px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: rgba(43, 99, 161, 0.05);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #2b63a1;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          cursor: pointer;
          color: #2b63a1;
        }

        .buttonWidth {
          width: 160px;
        }

        .active {
          background: #2b63a1 !important;
          color: #ffffff !important;
          opacity: 1 !important;
        }
      }
    }
  }
</style>
